<template>
  <div class="search">
    <el-form :inline="true">
      <el-form-item label="关键字" prop="name">
        <el-input placeholder="角色名称" v-model="input.name" clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">搜索</el-button>
        <el-button @click="reset"> 重置</el-button>
      </el-form-item>
    </el-form>
  </div>

  <el-card shadow="never">
    <template #header>
      <el-button type="success" @click.stop="add">新增</el-button>
      <el-button type="danger" v-show="false">删除</el-button>
    </template>

    <div class="box-list">
      <el-table border style="width: 100%" :data="roles.list">
        <el-table-column type="index" width="60" label="序号" />
        <el-table-column prop="name" label="角色名称" width="auto" />
        <el-table-column prop="code" label="角色编码" width="180" />
        <el-table-column prop="status" label="状态" width="180">
          <template #default="scope">
            <el-text v-if="scope.row.status == 0" type="primary">正常</el-text>
            <el-text v-if="scope.row.status == 1" type="warning">禁用</el-text>
          </template>
        </el-table-column>
        <el-table-column prop="sort" label="排序" width="180" align="center" />
        <el-table-column label="操作" width="320" align="center">
          <template #default="scope">
            <el-button text type="primary" size="small" @click.stop="edit(scope.row)">编辑</el-button>
            <el-button text type="warning" size="small" @click.stop="deleteDictType(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination class="page" v-model:current-page="input.pageNo" v-model:page-size="input.pageSize"
        @update:page-size="search" @update:current-page="search" :background="true" layout="sizes, prev, pager, next"
        :page-sizes="[10, 20, 30, 50]" :total="roles.count" />
    </div>
  </el-card>

  <el-dialog v-model="dialogModel.dialogVisible" :title="dialogModel.title" :width="500">
    <el-form label-width="100px" :model="role" :rules="rules" ref="ruleFormRef">
      <el-form-item label="角色名称" prop="name">
        <el-input placeholder="请输入角色名称" v-model="role.name" />
      </el-form-item>
      <el-form-item label="角色编码" prop="code">
        <el-input placeholder="请输入角色编码" v-model="role.code" />
      </el-form-item>
      <el-form-item label="状态:" prop="status">
        <el-radio-group v-model="role.status">
          <el-radio :label="0">正常</el-radio>
          <el-radio :label="1">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="排序" prop="sort">
        <el-input-number style="width: 100px" controls-position="right" :min="0" v-model="role.sort" />
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click.stop="commit">确 定</el-button>
        <el-button @click.stop="closeDialog">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { IRole, IRoleInputDto, getRules } from "@/api/role/type"
import { addSysRole, getSysRolePage, updateSysRole, deleteSysRole } from "@/api/role/index"
import { IPageOutput, ConfirmDialog, validateForm } from "@/utils/common"
import { Dialog } from "@/utils/dialog";
import { ElMessage } from "element-plus";
import type { FormInstance } from 'element-plus'
// 输入viewModel
const input = reactive<IRoleInputDto>({
  pageSize: 10,
  pageNo: 1,
});
// 角色列表
const roles = ref<IPageOutput<IRole>>({
  count: 0,
  list: [],
});
// 弹窗viewModel
const dialogModel = reactive(new Dialog());
// 角色model
const role = reactive<IRole>({
  sort: 0,
  status: 0,
});
// 验证规则
const rules = getRules();
// 表单实例
const ruleFormRef = ref<FormInstance | null>(null);

// 搜索
const search = async () => {
  const data = await getSysRolePage(input);
  roles.value = data.data;
};
search();
const reset = async () => {
  input.name = "";
  await search();
}
// 新增
const add = () => {
  dialogModel.show("新增")

  role.id = 0;
  role.name = "";
  role.code = "";
  role.sort = 0;
  role.status = 0;
}
// 编辑
const edit = (r: IRole) => {
  dialogModel.show("编辑");

  role.id = r.id;
  role.name = r.name;
  role.code = r.code;
  role.sort = r.sort;
  role.status = r.status;
}

const commit = async () => {
  validateForm(ruleFormRef).then(async () => {
    if (dialogModel.title == "新增") {
      await addSysRole(role);
    }
    else if (dialogModel.title == "编辑") {
      await updateSysRole(role);
    }

    await search();
    closeDialog();
  })
}
// 关闭弹窗
const closeDialog = () => {
  dialogModel.close();
}
// 删除
const deleteDictType = (id: number) => {
  ConfirmDialog("确认删除?",
    async () => {
      await deleteSysRole([id]);
      await search();
      ElMessage({
        type: 'success',
        message: '删除成功',
      });
    },
    () => {
      ElMessage({
        type: 'info',
        message: '删除取消',
      });
    });
}
</script>

<style></style>